<template>
    <div class="doc-detail-page">
        <PageHeader 
            title="文档详情" 
            subtitle="技术文档详细内容"
            :breadcrumbItems="[
                { text: '首页', path: '/' },
                { text: '技术文档', path: '/docs' }
            ]"
            :currentText="docData.title || '文档详情'"
        />
        
        <div class="page-container" v-loading="loading">
            <div class="doc-container" v-if="docData._id">
                <!-- 文档头部 -->
                <div class="doc-header">
                    <h1 class="doc-title">{{ docData.title }}</h1>
                    <div class="doc-meta">
                        <span class="doc-category">{{ getCategoryName(docData.category) }}</span>
                        <span class="doc-date">{{ formatDate(docData.editTime) }}</span>
                    </div>
                    <div class="doc-cover" v-if="docData.cover">
                        <img :src="docData.cover" :alt="docData.title">
                    </div>
                </div>
                
                <!-- 文档内容 -->
                <div class="doc-content">
                    <div v-html="docData.content"></div>
                </div>
                
                <!-- 相关推荐 -->
                <div class="related-docs" v-if="relatedDocs.length > 0">
                    <h2 class="section-title">相关推荐</h2>
                    <div class="related-list">
                        <el-card 
                            v-for="item in relatedDocs" 
                            :key="item._id" 
                            class="related-item" 
                            shadow="hover"
                            @click="viewOtherDoc(item._id)"
                        >
                            <div class="related-cover">
                                <img :src="item.cover" :alt="item.title">
                            </div>
                            <div class="related-info">
                                <h3 class="related-title">{{ item.title }}</h3>
                                <p class="related-desc">{{ getSummary(item.content) }}</p>
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
            
            <!-- 空状态 -->
            <el-empty v-else-if="!loading" description="暂无文档信息" />
        </div>
    </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getDocsDetail, getDocsCategories, getDocsList } from '@/api/docs';
import { getSummary, formatDate } from '@/utils/helper';
import PageHeader from '@/components/PageHeader.vue';

export default {
    name: 'DocView',
    components: {
        PageHeader
    },
    setup() {
        const route = useRoute();
        const router = useRouter();
        const loading = ref(true);
        const docData = ref({});
        const categories = ref([]);
        const relatedDocs = ref([]);
        
        // 获取文档分类
        const fetchCategories = async () => {
            try {
                const res = await getDocsCategories();
                if (res.data && res.data.ActionType === 'ok') {
                    categories.value = res.data.data;
                }
            } catch (error) {
                console.error('获取文档分类失败:', error);
            }
        };
        
        // 获取文档详情
        const fetchDocDetail = async (id) => {
            if (!id) return;
            loading.value = true;
            
            try {
                const res = await getDocsDetail(id);
                if (res.data && res.data.ActionType === 'ok' && res.data.data.length > 0) {
                    docData.value = res.data.data[0];
                    fetchRelatedDocs(docData.value.category);
                }
            } catch (error) {
                console.error('获取文档详情失败:', error);
            } finally {
                loading.value = false;
            }
        };
        
        // 获取相关文档
        const fetchRelatedDocs = async (category) => {
            if (!category) return;
            
            try {
                const res = await getDocsList({ 
                    category, 
                    limit: 3, 
                    exclude: docData.value._id 
                });
                if (res.data && res.data.ActionType === 'ok') {
                    relatedDocs.value = res.data.data.filter(item => item._id !== docData.value._id).slice(0, 3);
                }
            } catch (error) {
                console.error('获取相关文档失败:', error);
            }
        };
        
        // 获取分类名称
        const getCategoryName = (categoryId) => {
            if (!categoryId) return '未分类';
            const category = categories.value.find(c => c.id === categoryId);
            return category ? category.name : '未分类';
        };
        
        // 查看其他文档
        const viewOtherDoc = (id) => {
            router.push(`/docs/${id}`);
        };
        
        onMounted(async () => {
            await fetchCategories();
            await fetchDocDetail(route.params.id);
        });
        
        return {
            docData,
            loading,
            categories,
            relatedDocs,
            getCategoryName,
            formatDate,
            getSummary,
            viewOtherDoc
        };
    }
}
</script>

<style lang="scss" scoped>
.doc-detail-page {
    .doc-container {
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        padding: 30px;
        margin-bottom: 30px;
        
        .doc-header {
            margin-bottom: 30px;
            
            .doc-title {
                font-size: 28px;
                font-weight: 600;
                color: #333;
                margin-top: 0;
                margin-bottom: 15px;
            }
            
            .doc-meta {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                color: #888;
                font-size: 14px;
                
                .doc-category {
                    background-color: #f4f4f5;
                    color: #606266;
                    padding: 2px 8px;
                    border-radius: 4px;
                    margin-right: 15px;
                }
            }
            
            .doc-cover {
                width: 100%;
                height: 300px;
                overflow: hidden;
                border-radius: 6px;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        
        .doc-content {
            line-height: 1.8;
            color: #333;
            font-size: 16px;
            
            ::v-deep(img) {
                max-width: 100%;
                height: auto;
                margin: 10px 0;
            }
            
            ::v-deep(p) {
                margin-bottom: 16px;
            }
            
            ::v-deep(h1),
            ::v-deep(h2),
            ::v-deep(h3),
            ::v-deep(h4),
            ::v-deep(h5),
            ::v-deep(h6) {
                margin-top: 24px;
                margin-bottom: 16px;
                font-weight: 600;
                line-height: 1.25;
            }
            
            ::v-deep(blockquote) {
                padding: 0 1em;
                color: #6a737d;
                border-left: .25em solid #dfe2e5;
                margin-bottom: 16px;
            }
            
            ::v-deep(ul),
            ::v-deep(ol) {
                padding-left: 2em;
                margin-bottom: 16px;
            }
            
            ::v-deep(pre) {
                padding: 16px;
                overflow: auto;
                font-size: 85%;
                line-height: 1.45;
                background-color: #f6f8fa;
                border-radius: 6px;
                margin-bottom: 16px;
            }
            
            ::v-deep(code) {
                padding: .2em .4em;
                margin: 0;
                font-size: 85%;
                background-color: rgba(27,31,35,.05);
                border-radius: 6px;
            }
            
            ::v-deep(table) {
                width: 100%;
                overflow: auto;
                margin-bottom: 16px;
                border-spacing: 0;
                border-collapse: collapse;
                
                th, td {
                    padding: 6px 13px;
                    border: 1px solid #dfe2e5;
                }
                
                tr {
                    background-color: #fff;
                    border-top: 1px solid #c6cbd1;
                    
                    &:nth-child(2n) {
                        background-color: #f6f8fa;
                    }
                }
                
                th {
                    font-weight: 600;
                }
            }
        }
        
        .related-docs {
            margin-top: 50px;
            border-top: 1px solid #eee;
            padding-top: 30px;
            
            .section-title {
                font-size: 20px;
                font-weight: 600;
                color: #333;
                margin-top: 0;
                margin-bottom: 20px;
            }
            
            .related-list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                
                @media (max-width: 992px) {
                    grid-template-columns: repeat(2, 1fr);
                }
                
                @media (max-width: 576px) {
                    grid-template-columns: 1fr;
                }
                
                .related-item {
                    cursor: pointer;
                    display: flex;
                    
                    .related-cover {
                        width: 100px;
                        height: 80px;
                        flex-shrink: 0;
                        margin-right: 15px;
                        
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 4px;
                        }
                    }
                    
                    .related-info {
                        flex: 1;
                        overflow: hidden;
                        
                        .related-title {
                            margin: 0 0 8px;
                            font-size: 16px;
                            font-weight: 600;
                            color: #333;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        
                        .related-desc {
                            margin: 0;
                            font-size: 12px;
                            color: #666;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }
                    }
                    
                    &:hover {
                        .related-title {
                            color: #409EFF;
                        }
                    }
                }
            }
        }
    }
}
</style> 